<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<title></title>
		<link rel="stylesheet" href="css/index.css"></link>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/sharejs.js"></script>
		<style>
			.item-flex-center{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>

	<body>
		
		
		
		<div id="content" class="all-content" v-bind:style="{height:labhgt + 'px'}">

			<img id="imgBg" class="img-bg" src="imgs/yanzhi.jpg" onload="bgImageLoad()" />
			
			<div class="lab-content">
				<div v-bind:style="iconpos" style="position: relative;">
					<img src="imgs/border.png" style="width: 100%;height: 100%;" />
					<div id="userpic_container" class="user-pic">
						<img class="user-pic-img" id="userpic" style="height: 100%;width: auto;" />
					</div>
					<div v-if="finish==1" class="user-pic" style="font-size:18px;color: #666666;display: flex;flex-direction: row;justify-content: center;align-items: center;">
						检测中...
					</div>
					<div class="user-pic" style="overflow: visible;">
						<div id="face_container" style="position: absolute;">
							<div v-for="(face,index) in faces" class="face-item" style="border: none;" v-bind:style="{left:face[0]+'px',top:face[1]+'px',width:face[2]+'px',height:face[3]+'px'}">
								 <!--v-on:click="faceSelect(index)"  v-if="index==faceindex" -->
								<div class="beauty-img">
									<img src="imgs/flag.png" style="width: 60px;height: auto;" />
									<div style="width: 60px;position: relative;top: -36px;">
										<img v-bind:src="face[5]==0 ? 'imgs/girl.png':'imgs/boy.png'" style="display: inline;width: 18px;height: 18px;position: relative;top: 2px;" /> {{face[4]}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!--<div style="position: absolute; top: 50;left: 50; width: 300px; height: 300px; border:1px solid red;display:none;" >
					<textarea style="width: 200px; height: 260px;" id="errortxt">
					</textarea>
				</div>-->
				
				<div style="text-align: center;">
					<button class="img-btn" onclick="chooseImageAction()">
						<img disabled="true" src="imgs/upload.png" v-bind:style="{width:btnwtd + 'px'}" style="height: auto;" onclick="return false"/>
					</button>
				</div>
				<div style="text-align: center;">
					<div style="color:#84BBF9;font-size: 1.2rem;font-weight: bold;">~你就是我心中的女神~</div>
					<div style="height:5px;"></div>
					<img id="storeicon" src="imgs/logo.png" style="width: 5rem;height: 5rem;"/>
					<div style="height:5px;"></div>
					<div style="color: #afafaf;font-size: 12px;">
						本环节由上海爱梨网络有限公司提供
					</div>
					<div style="height:10px;"></div>
				</div>
			</div>
			<img id='giftbtn' src="imgs/gift.png" class="gift" />
		</div>
		<div class="loading-part" id="loading" style="display: none;">
			<div class="loading-part-inner">
				<div class="spinner">
					<div class="bounce1"></div>
					<div class="bounce2"></div>
					<div class="bounce3"></div>
				</div>
			</div>
		</div>
		<div class="loading-part" id="msgbox" style="display: none;">
			<div style="display: flex;flex-direction: row;justify-content: center;align-items: center;width: 100%;height: 100%;font-family: '微软雅黑';">
				<div style="width: 80%;height: 30%;background-color: #FFFFFF;border-radius: 5px;">
					<div id="msg" class="item-flex-center" style="width: 100%;height: 70%;color: #232323;">
						
					</div>
					<div class="item-flex-center" style="width: 100%;height: 30%;border-top: 1px solid #dfdfdf;box-sizing: border-box;color: #007AFF;font-size: 16px;" onclick="closeMsgBox()">
						我知道了
					</div>
				</div>
			</div>
		</div>
		
		
		
	</body>
	<script>
		var bgIsLoad = false;
		var iconH, iconW, userH, userW;
		var canSubmit;
		var content = new Vue({
			el: '#content',
			data: {
				process: 1,
				finish: -1,
				labhgt: 0,
				btnwtd: 0,
				iconpos: {},
				faces: [],
				faceindex: 0
			},
			methods: {
				faceSelect: function(val) {
					content.faceindex = val;
				}
			}
		});
		window.onload = function() {
			content.labhgt = document.body.clientHeight;
			var tempwidth = 170 * document.body.clientWidth * 2 / 640;
			var tempheight = 230 * document.body.clientHeight * 2 / 1136;
			var temptop = 112 * document.body.clientHeight * 2 / 1136;
			content.iconpos = {
				'width': tempwidth + 'px',
				'height': tempheight + 'px',
				'margin-top': temptop + 'px'
			}
			content.btnwtd = tempwidth;
			iconH = tempheight - 4;
			iconW = tempwidth - 4;

			var giftW = (document.body.clientWidth - tempwidth - 20) * 0.5;
			var giftH = giftW * 191 / 136;
			var giftTop = temptop + tempheight - giftH - 10;
			$('#giftbtn').css('width', giftW + 'px');
			$('#giftbtn').css('top', giftTop + 'px');

			canSubmit = true;
			SetShareMsg('', '', '', '');
			
			//------------------------------------弹出框----------
			
		}

		function chooseImageAction() {
			content.finish = 0;
			selectImage();
			$("#errortxt").text('start select');
		}

		function bgImageLoad() {
			if(bgIsLoad) {
				return;
			}
			bgIsLoad = true;
			var bgW = document.getElementById('imgBg').clientWidth;
			var bgH = document.getElementById('imgBg').clientHeight;
			var winW = document.body.clientWidth;
			var winH = document.body.clientHeight;
			if(bgW < winW) {
				bgH = bgH * winW / bgW;
				bgW = winW;
			} else if(bgH < winH) {
				bgW = bgW * winH / bgH;
				bgH = winH;
			}
			document.getElementById('imgBg').style.width = bgW + 'px';
			document.getElementById('imgBg').style.height = bgH + 'px';
		}

		function userImageLoad(picW, picH) {
			var cntW = iconW;
			var cntH = iconH;
			console.log(cntW + '|' + cntH);
			if(picW / cntW < picH / cntH) {
				picH = picH * cntW / picW;
				picW = cntW;
			} else {
				picW = picW * cntH / picH;
				picH = cntH;
			}
			console.log(picW + '|' + picH);
			document.getElementById('userpic').style.width = picW + 'px';
			document.getElementById('userpic').style.height = picH + 'px';
			var top = 0,
				left = 0;
			if(picW > cntW) {
				left = (cntW - picW) * 0.5;
			}
			if(picH > cntH) {
				top = (cntH - picH) * 0.5;
			}
			document.getElementById('userpic').style.top = top + 'px';
			document.getElementById('userpic').style.left = left + 'px';
			//			document.getElementById('face_container').style.top = top + 'px';
			//			document.getElementById('face_container').style.left = left + 'px';
			userH = picH;
			userW = picW;
			console.log('aaaaa');
		}

		function imageIosBack(picdata) {
			content.finish = 1;
			document.getElementById('userpic').src = "";
			document.getElementById('loading').style.display = 'inherit';
			submitPicToServer(picdata);
		}

		function imageBack(picdata) {
			content.finish = 1;
			$("#errortxt").text('backk');
			
			document.getElementById('userpic').src = "";
			document.getElementById('loading').style.display = 'inherit';
			picdata = 'data:image/jgp;base64,' + picdata;
			
			//$("#errortxt").html(picdata);
			$("#errortxt").text(picdata);
			submitPicToServer(picdata);
			
		}

		function submitPicToServer(picdata) {
			if(picdata == "") {
				return;
			}
			if(!canSubmit) {
				return;
			}
			content.faces = [];
			canSubmit = false;
			var basearr = picdata.split(',');
			var top = basearr[0];
			var str64 = basearr[1];
			var sendDb = {
				type: 'beautiful',
				TopSaveimage: top,
				saveimage: str64
			};
			$.ajax({
				type: 'POST',
				url: "http://www.jubenxiong.com/php_face_sdk/fcheck4.php",
				data: sendDb,
				dataType: 'text',
				success: function(data, textStatus, jqXHR) {
					content.finish = 0;
					canSubmit = true;
					document.getElementById('loading').style.display = 'none';
					var result = JSON.parse(data);
					if(result['error'] == 'ok') {
						showResult(result);
						$("#userpic").attr("src", picdata);
					} else {
						document.getElementById('userpic').src = "";
						alert('无法识别人脸，请您重新上传');
					}
				},
				error:function(res){
					alert('fail='+res);
				}
			})
		}
		
		function showMsg(msg){
			document.getElementById('msgbox').style.display = 'inherit';
			document.getElementById('msg').innerText = msg;
		}
		function closeMsgBox(){
			document.getElementById('msgbox').style.display = 'none';
		}

		function showResult(data) {
			var res_width = data.face.image_width;
			var res_height = data.face.image_height;
			userImageLoad(res_width, res_height);
			var user_picW = iconW;
			var user_picH = iconH;
			var faces = [];
			var maxbeauty = 0;
			for(var i = 0; i < data.face.face.length; i++) {
				var face_x = data.face.face[i].x;
				var face_y = data.face.face[i].y;
				var face_width = data.face.face[i].width;
				var face_height = data.face.face[i].height;
				var beauty = data.face.face[i].beauty;
				var sex = data.face.face[i].gender == 0 ? 0 : 1;
				var new_x = face_x * user_picW / res_width;
				var new_y = face_y * user_picH / res_height;
				var new_size_width = face_width * userW / res_width;
				var new_size_height = face_height * userH / res_height;
				var temleft = 0;
				if(new_size_width < 60) {
					temleft = (new_size_width - 60) * 0.5;
				}
				faces.push([new_x, new_y, new_size_width, new_size_height, beauty, sex, temleft]);
				
				if(beauty > maxbeauty){
					maxbeauty = beauty;
				}
			}
			content.faceindex = 0;
			content.faces = faces;
			
			if(maxbeauty>70){
				//alert('maxbeauty='+maxbeauty);
				AddGameAward();
			}
		}
		
		function getStoreinfo(){
			
			var storeid = getQueryString('storeid');
			if(!storeid)
				return;
				
			var sendDb = {
				storeid:storeid
			};
			$.ajax({
				type: 'POST',
				url: "http://www.jubenxiong.com/games/dianwu/php/index.php/store/Store/storeinfo",
				data: sendDb,
				dataType: 'text',
				success: function(data, textStatus, jqXHR) {
					document.getElementById('loading').style.display = 'none';
					var result = JSON.parse(data);
					console.log(result);
					console.log(result['status']);
					if(result['status'] == 'ok') {
						console.log(result);
						document.getElementById('storeicon').src = 'https://www.jubenxiong.com/games/dianwu/admin' + result.result.shareicon;
					}
				},
				error:function(res){
					alert('fail='+res);
				}
			});
		}
		
		//分数到了添加奖励的接口
		function AddGameAward(){
		
			//http://www.jubenxiong.com/php_face_sdk/fcheck4/test.html?gameid=8&storeid=18&userid=457
		
			var gameid = getQueryString('gameid');
			var userid = getQueryString('userid');
			
			//alert('gameid='+gameid+'userid='+userid);
			
			if(!gameid){
				gameid = 0;
			}
			
			if(!userid){
				userid = 0;
			}
			
			if(userid<=0 || gameid <=0){
				return;
			}
			
			var sendDb = {
				userid:userid,
				gameid:gameid
			};
			$.ajax({
				type: 'POST',
				url: "http://www.jubenxiong.com/games/dianwu/php/index.php/store/Games/addGameReward",
				data: sendDb,
				dataType: 'text',
				success: function(data, textStatus, jqXHR) {
					document.getElementById('loading').style.display = 'none';
					var result = JSON.parse(data);
					if(result['status'] == 'ok') {
						showMsg('恭喜亲,您获得一份神秘大奖！');
					}
					else{
						showMsg('你已经获得过该游戏奖励！');
					}
				},
				error:function(res){
					alert('fail='+res);
				}
			});
		}
		
		
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			console.log('name='+name);
			if(r && r != null){			
				return decodeURIComponent(r[2]);
			}
			return null;
		}
		
		getStoreinfo();
		function shareImageAction() {

		}
	</script>

</html>